<template>
    <div class="dashboard-container">
      <!-- 筛选查询 -->
      <el-form :inline="true">
        <el-form-item label="运营商账号">
          <el-input placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="打款状态">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核状态">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="代理商">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary">查询</el-button>
      </el-form>

      <!-- 数据 -->
      <el-table :data="list">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="a" label="代理商名称"></el-table-column>
        <el-table-column prop="b" label="手机号"></el-table-column>
        <el-table-column prop="c" label="提现金额"></el-table-column>
        <el-table-column prop="d" label="账号"></el-table-column>
        <el-table-column prop="e" label="审核人"></el-table-column>
        <el-table-column prop="f" label="申请状态"></el-table-column>
        <el-table-column prop="g" label="打款状态"></el-table-column>
        <el-table-column prop="h" label="打款账户"></el-table-column>
        <el-table-column prop="i" label="失败原因"></el-table-column>
        <el-table-column prop="nj" label="时间"></el-table-column>
        <el-table-column label="操作" width="150">
            <template>
                <el-button type="success" size="mini">通过</el-button>
                <el-button type="danger"  size="mini">驳回</el-button>
            </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div style="padding-top:30px; text-align: right;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          background
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400">
        </el-pagination>
      </div>

    </div>
  </template>
  
  <script>
  import { mapGetters } from 'vuex'
  
  export default {
    name: 'Dashboard',
    computed: {
      ...mapGetters([
        'name'
      ])
    },
    data(){
      return {
        list: [{
            a: '梅乐胜',
            b: '18550347852',
            c: '100',
            d: 'mls118',
            e: '管理员',
            f: '申请中',
            g: '未打款',
            h: '18550347852',
            i: '',
            j: '2023-05-16 14:45:18',
        }],
        currentPage4: 1
      }
    },
    methods:{
      handleSizeChange(){

      },
      handleCurrentChange(){

      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
    }
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
  </style>
  